<template>
	<div class="shop">
		<div class="left">
			<el-menu default-active="2" class="el-menu-vertical-demo" background-color="#fff" text-color="#333" active-text-color="#333">
				<el-menu-item v-for="(item,index) in route" :key="index" @click="goLink(item)" :index="item.path">
					<i :class="item.icon"></i>
					<span slot="title">{{item.name}}</span>
				</el-menu-item>
			</el-menu>
		</div>
		<div class="right">
			<router-view></router-view>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				route: [{
						name: "商品列表",
						path: "/shop/list",
						icon: "el-icon-menu"
					},
					{
						name: "商品新增",
						path: "/shop/add",
						icon: "el-icon-menu"
					},
					{
						name: "分类管理",
						path: "/shop/classify",
						icon: "el-icon-menu"
					},
					{
						name: "分类新增",
						path: "/shop/addclassify",
						icon: "el-icon-menu"
					},
				]
			}
		},
		methods: {
			goLink(item) {
				this.$router.push({
					path: item.path
				})
			}
		}
	}
</script>
<style scoped>
	.shop {
		flex: 1;
	}
	
	.left {
		width: 200px;
		background-color: #fff;
		overflow: hidden;
		height: 100%;
		border-right: 1px solid #f2f2f2;
		box-sizing: border-box;
	}
	
	.right {
		background-color: fff;
		overflow: hidden;
		padding: 0 24px;
		box-sizing: border-box;
		width: 1200px;
	}
	
	.shop {
		display: flex;
		flex-direction: row;
	}
</style>